<template>
  <div class="dateX">
    <el-date-picker v-model="nowDate"
        :type="props.type" :placeholder="props.placeholder"
        :disabled-date="disabledDate" :shortcuts="shortcuts"
        :size="props.size" :value-format="props.value"/>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
import { ElDatePicker } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object,
    default: ""
  },
  type: {
    type: String,
    default: 'date'
  },
  placeholder:{
    type: String,
    default: "请选择日期"
  },
  size:{
    type: String,
    default: "default"
  },
  format: {
    type: String,
    default: "YYYY-MM-DD"
  },
  // 值的格式：YYYY-MM-DD HH:mm:ss
  value:{
    type: String,
    default: undefined
  }
})

const emit = defineEmits(['update:modelValue'])

const nowDate = ref({})
watch(()=>props.modelValue,newV => {
  nowDate.value = newV
},{immediate:true,deep:true})
watch(()=>nowDate.value,newV => {
  emit('update:modelValue',newV)
},{deep:true})

</script>

<style scoped lang='scss'>

</style>